<template>
  <div class="comment-number-content">
    <span style="color: white;">.</span>
    <!-- <div>评价率：{{ commentRate }}</div> -->
    <div id="comment-main" style="width: 100%; height: 70px"></div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, watch, computed } from 'vue';
import { getAllOrders } from '@/api/order';
import * as echarts from 'echarts';
const props = defineProps({
  dateRange: Array
});
const commentNumber = ref(0);
const unCommentNumber = ref(0);
const divideZero = ref(false)
const order = ref([]);

const commentRate = computed(() => {
    if (divideZero.value)
        return '目前没有任何订单送达'
    return (commentNumber.value * 100 / (commentNumber.value + unCommentNumber.value)).toFixed(2) + '%'
})

const getOrder = () => {
    getAllOrders({}).then(res => {
        order.value = res.data.data.records || [];
        // 区间过滤
        let filtered = order.value;
        if (props.dateRange && props.dateRange.length === 2) {
          const [start, end] = props.dateRange;
          const startTime = new Date(start);
          const endTime = new Date(end);
          filtered = order.value.filter(element => {
            const t = new Date(element.createdAt);
            return t >= startTime && t <= endTime;
          });
        }
        commentNumber.value = 0;
        unCommentNumber.value = 0;
        filtered.forEach(element => {
            if (element.status === '已完成')
                commentNumber.value++;
            else if (element.status === '待评价')
                unCommentNumber.value++;
        });
        if (commentNumber.value == 0 && unCommentNumber.value == 0)
            divideZero.value = true
        else
            divideZero.value = false
        // 图表
        var chartDom = document.getElementById('comment-main');
        var myChart = echarts.init(chartDom);
        myChart.resize({
            width: '200',
            height: '90'
        })
        var option;
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['未评论', '已评论']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value'
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    show: false,
                    axisTick: {
                        show: false
                    },
                    data: ['订单数量']
                }
            ],
            series: [
                {
                    name: '未评论',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        show: true,
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [unCommentNumber.value]
                },
                {
                    name: '已评论',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        show: true,
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [commentNumber.value]
                }
            ]
        };
        option && myChart.setOption(option);
    })
}

watch(() => props.dateRange, () => {
    commentNumber.value = 0;
    unCommentNumber.value = 0;
    getOrder();
}, { immediate: true })
</script>

<style scoped>
.card-header-style {
    color: #73767a;
    display: flex;
    align-items: center;
    height: 20px;
    justify-content: space-between;
    font-size: 15px;
}
</style>
